<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>SearchHub - 半桔智搜</title>
    <!-- 引入 Tailwind CSS -->
    <script src="https://cdn.tailwindcss.com"></script>
    <!-- 引入 Font Awesome 图标 -->
    <link href="https://cdn.bootcdn.net/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">

    <!-- Tailwind 配置（自定义颜色、字体） -->
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#165DFF', // 主色调：蓝色
                    },
                    fontFamily: {
                        inter: ['Inter', 'system-ui', 'sans-serif'],
                    },
                }
            }
        }
    </script>

    <!-- 自定义工具类：毛玻璃搜索框、文字发光效果 -->
    <style type="text/tailwindcss">
        @layer utilities {
            .search-input-glass {
                background-color: rgba(255, 255, 255, 0.8);
                backdrop-filter: blur(4px);
                box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
            }
            .text-glow {
                /* text-shadow: 0 0 8px rgba(255, 255, 255, 0.9); */
            }
        }
    </style>

    <!-- 背景与遮罩样式：控制随机背景的显示 + 保证文字可读性 -->
    <style>
        /* 随机背景图的显示规则（覆盖、居中、过渡动画） */
        .random-background {
            background-size: cover;
            background-position: center;
            background-repeat: no-repeat;
            transition: background-image 0.5s ease;
        }
        /* 半透明遮罩（降低背景对前景文字的干扰） */
        .bg-mask {
            background-color: rgba(255, 255, 255, 0.5);
        }
    </style>
</head>

<!-- 页面整体：随机背景 + 半透明遮罩 + 垂直布局 -->
<body class="font-inter min-h-screen flex flex-col items-center p-4 random-background bg-mask">
    <!-- 顶部：动态时间与日期 -->
    <div class="text-center mt-12">
        <div id="clock" class="text-[clamp(3rem,8vw,5rem)] font-bold text-black text-glow leading-tight" style="color:darkblue;"></div>
        <div id="date" class="text-gray-600 text-lg mt-2" style="color:hotpink; font-weight: bold; "></div>
    </div>

    <!-- 中间：搜索框（带 hover/聚焦 交互效果） -->
    <div class="w-full max-w-xl relative my-4 transition-all duration-200">
        <input type="text" id="searchInput" placeholder="输入搜索内容..."
            class="w-full pl-10 pr-40 py-3 rounded-full border border-gray-200 search-input-glass 
            focus:outline-none focus:ring-2 focus:ring-primary/30 focus:border-primary 
            hover:shadow-lg transition-all duration-200">
        <button id="searchButton"
            class="absolute right-2 top-1/2 transform -translate-y-1/2 bg-primary text-white 
            px-6 py-2 rounded-full text-sm font-medium hover:bg-primary/90 
            hover:scale-105 transition-all duration-200">
            搜索
        </button>
        <div class="absolute left-4 top-1/2 transform -translate-y-1/2 text-gray-400">
            <i class="fa fa-search text-lg"></i>
        </div>
    </div>

    <!-- 底部：品牌名称（靠页面底部显示） -->
    <div class="flex flex-col items-center justify-end mt-auto mb-4">
        <h1 class="text-lg font-bold" style="color:chocolate; ">⌈ 半桔智搜 ⌋</h1>
    </div>

    <script>
        // 1. 动态更新时间与日期（含星期、月份、日期转换）
        const weekDays = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'];
        function updateTimeAndDate() {
            const now = new Date();
            // 时间（时:分:秒，不足两位补零）
            const hours = now.getHours().toString().padStart(2, '0');
            const minutes = now.getMinutes().toString().padStart(2, '0');
            const seconds = now.getSeconds().toString().padStart(2, '0');
            document.getElementById('clock').textContent = `${hours}:${minutes}:${seconds}`;
            // 日期（星期 + 月 + 日）
            const weekDay = weekDays[now.getDay()];
            const month = now.getMonth() + 1; // 月份是 0-11，需 +1
            const date = now.getDate();
            document.getElementById('date').textContent = `${weekDay} ${month}月${date}日`;
        }
        updateTimeAndDate(); // 页面加载时立即执行一次
        setInterval(updateTimeAndDate, 1000); // 每秒更新一次

        // 2. 搜索功能（点击按钮/按回车键触发，空值提示）
        const searchInput = document.getElementById('searchInput');
        const searchButton = document.getElementById('searchButton');

        // 搜索框「聚焦/失焦」时的缩放动画
        searchInput.addEventListener('focus', () => {
            searchInput.parentElement.classList.add('scale-[1.02]');
        });
        searchInput.addEventListener('blur', () => {
            searchInput.parentElement.classList.remove('scale-[1.02]');
        });

        function openSearchResults() {
            const query = searchInput.value.trim();
            if (query) {
                // 若有本地搜索结果页，可改为：
                window.open(`search-results.html?query=${encodeURIComponent(query)}`, '_blank');
            } 
        }
        searchButton.addEventListener('click', openSearchResults);
        searchInput.addEventListener('keypress', e => e.key === 'Enter' && openSearchResults());

        // 3. 设置「随机背景图」（使用 picsum.photos，国内访问更稳定）
        function setRandomBackground() {
            const body = document.body;
            // 每次生成不同的随机高清图片
            const randomImgUrl = 'https://picsum.photos/2560/1440?format=webp';
            body.style.backgroundImage = `url('${randomImgUrl}')`;
        }

        // 页面加载完成后，设置第一次背景
        window.addEventListener('load', setRandomBackground);
        // （可选）定时更换背景，比如每 30 分钟换一次
        // setInterval(setRandomBackground, 30 * 60 * 1000);
    </script>
</body>

</html>